<template>
  <div>
    <div class="topSearch">
      <div class="leftBox" style="max-width:100%;">
        <div class="searchbox">
            <em>学年：</em>
            <el-select v-model="select.xuenian" size="small" placeholder="请选择学年">
              <el-option v-for="(item,index) in select.yearList" :key="index" :label="item.timeName" :value="item.id"></el-option>
            </el-select>
          </div>
        <div class="searchbox">
          <em>缴费方案：</em>
          <el-select
            v-model="searchBox.projectId"
            placeholder="请选择"
            @change="changeTName"
            size="small"
            style="width:120px"
          >

            <el-option
              v-for="item in select.paymentSchemeList"
              :key="item.projectId"
              :label="item.projectName"
              :value="item.projectId"
            ></el-option>
          </el-select>
        </div>
        <div class="searchbox">
          <em>学生姓名或身份证号：</em>
          <el-input
            v-model="searchBox.studentQuery"
            size="small"
            style="width:200px"
            placeholder="请输入学生姓名或身份证号"
          ></el-input>
        </div>
        <div class="searchbox">
          <em>缴费类型：</em>
          <el-select
            v-model="searchBox.category"
            placeholder="请选择"
            size="small"
            style="width:120px"
            @change="getcategory"
          >
            <el-option label="全部" value key></el-option>
            <el-option
              v-for="item in select.categoryList"
              :key="item.category"
              :label="item.categoryName"
              :value="item.category"
            ></el-option>
          </el-select>
        </div>
        <br>
        <div class="searchbox">
          <em>校区：</em>
          <el-select v-model="searchBox.schoolId" placeholder="请选择" size="small" style="width:200px"  @change="selectGrade">
            <el-option label="全部" value key></el-option>
            <el-option
              v-for="item in select.schoolList"
              :key="item.schoolId"
              :label="item.schoolName"
              :value="item.schoolId"
            ></el-option>
          </el-select>
        </div>
        <div class="searchbox">
          <em>年级：</em>
          <el-select v-model="searchBox.gradeId" placeholder="请选择" size="small" style="width:120px"  @change="selectClass">
            <el-option label="全部" value key></el-option>
            <el-option
              v-for="item in select.gradeList"
              :key="item.gradeId"
              :label="item.gradeName"
              :value="item.gradeId"
            ></el-option>
          </el-select>
        </div>

        <div class="searchbox">
          <em>班级：</em>
          <el-select v-model="searchBox.classId" placeholder="请选择" size="small" :disabled="select.studentSource=='Sign'" style="width:120px" @change="getClass">
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="item in select.classList"
              :key="item.classId"
              :label="item.className"
              :value="item.classId"
            ></el-option>
          </el-select>
        </div>



        <div class="searchbox">
          <el-button type="primary" @click="LoadList" size="mini">查询</el-button>
          <el-button type="primary" @click="exportExcel" size="mini">导出</el-button>
        </div>
      </div>
      <div class="clear"></div>
    </div>

    <div class="contentBox" style="height:86%;">
      <el-table :data="tableData" :header-cell-style="headClass" border stripe style="width: 100%" height="90%">
        <el-table-column prop="projectName" label="缴费方案" width="180"></el-table-column>
        <el-table-column prop="paymentCategoryName" label="缴费类型" width="100"></el-table-column>
        <el-table-column prop="schoolName" label="所在学校" width="200"></el-table-column>
        <el-table-column prop="graduateYear" label="毕业年份" width="120"></el-table-column>
        <el-table-column prop="studentName" label="学生姓名" width="120"></el-table-column>
        <el-table-column prop="idCard" label="身份证号" width="200"></el-table-column>
        <el-table-column prop="gradeName" label="就读年级"></el-table-column>
        <el-table-column prop="className" label="就读班级"></el-table-column>
        <el-table-column  label="中考裸分">
          <template slot-scope="scope">
             <div> {{scope.row.totalScre==null?0:scope.row.totalScre}}</div>
          </template>
        </el-table-column>
        <el-table-column label="中考加分">
         <template slot-scope="scope">
             <div> {{scope.row.bonusScores==null?0:scope.row.bonusScores}}</div>
          </template>
        </el-table-column>
        <el-table-column  label="预报名加分" width="110">
           <template slot-scope="scope">
             <div> {{scope.row.preBonusScore==null?0:scope.row.preBonusScore}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="payableMoney" label="应收总额">
          <template slot-scope="scope">
           <el-button @click="see(scope.row)" type="text" :class="{fuFont:parseFloat(scope.row.payableMoney?scope.row.payableMoney:0).toFixed(2)*1000<0}"> {{scope.row.payableMoney==null?0:parseFloat(scope.row.payableMoney).toFixed(2)}}</el-button>

          </template>
        </el-table-column>
        <!-- <el-table-column label="应收明细">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="see(scope.row)">查看</el-button>
          </template>
        </el-table-column> -->
        <el-table-column label="实收合计">
                    <template slot-scope="scope">
             <div :class="{fuFont:parseFloat(scope.row.paidMoney?scope.row.paidMoney:0).toFixed(2)*1000<0}" > {{scope.row.paidMoney==null?0:parseFloat(scope.row.paidMoney).toFixed(2)}}</div>
          </template>
        </el-table-column>
        <el-table-column label="减免金额">
              <template slot-scope="scope">
             <el-button @click="see1(scope.row)" type="text" :class="{fuFont:parseFloat(scope.row.tuitionMoney?scope.row.tuitionMoney:0).toFixed(2)*1000<0}" style="color:#e8851e;" >{{scope.row.tuitionMoney==null?0:parseFloat(scope.row.tuitionMoney).toFixed(2)}}</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column label="减免费用明细" width="120">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="see1(scope.row)">查看</el-button>
          </template>
        </el-table-column> -->
        <el-table-column label="减免审批单" width="120">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="see2(scope.row)">查看附件</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="tuitionRemark" label="说明"></el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination
          background
          layout="total, prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page.sync="pageIndex"
          :total="pageAll"
        ></el-pagination>
      </div>
    </div>

  <!-- 弹层内容 -->
    <el-dialog title="应收明细" :visible.sync="dialogDetailed.show">
      <div class="layerBox">
        <div class="layerDetailedList">
          <dl v-for='d in dialogDetailed.data' :key="d.itemId">
            <dt>{{d.itemName}}</dt>
            <dd>{{d.money}}</dd>
          </dl>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="dialogDetailed.show=!dialogDetailed.show">确定</el-button>
      </div>
    </el-dialog>

    <!-- 弹层内容 -->
    <el-dialog title="减免费用明细" :visible.sync="dialogDetailed1.show">
      <div class="layerBox">
        <div class="layerDetailedList">
          <dl v-for='d in dialogDetailed1.data' :key="d.itemId">
            <dt>{{d.itemName}}</dt>
            <dd>{{d.money}}</dd>
          </dl>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="dialogDetailed1.show=!dialogDetailed1.show">确定</el-button>
      </div>
    </el-dialog>

    <!-- 弹层内容 -->
    <el-dialog title="减免审批单" :visible.sync="layerFiles.show">
      <div class="layerBox">
        <div class="fileList">
                <ul>
                  <li v-for="(f,index) in layerFiles.fileList" :key="index">
                    <em>
                      <i class="el-icon-s-management"></i>
                    </em>
                    <div class="set">
                      <el-tooltip class="item" effect="dark" content="下载" placement="top">
                        <a class="down" @click="downlade($store.state.userModule.phurl+f.fileUrl)">
                          <i class="el-icon-download"></i>
                        </a>
                      </el-tooltip>
                    </div>
                    <div class="mes">
                      <p>{{f.fileName}}</p>
                    </div>
                  </li>
                  <li v-for="(f,index1) in layerFiles.jianmianList" :key="'fj_'+index1">
                    <em>
                      <i class="el-icon-s-management"></i>
                    </em>
                    <div class="set">
                      <el-tooltip class="item" effect="dark" content="下载" placement="top">
                        <a class="down" @click="downlade(f.fileUrl)">
                          <i class="el-icon-download"></i>
                        </a>
                      </el-tooltip>
                    </div>
                    <div class="mes">
                      <p>{{f.fileName}}</p>
                    </div>
                  </li>
                </ul>
              </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="layerFiles.show=!layerFiles.show">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "reduction",
  data() {
    return {
      tableData:[],
      ccc: "减免列表",
      pageIndex: 1,
      pageAll: 0,
      searchBox: {
        category: "", //缴费类型：
        schoolId: "", //学校id
        gradeId: "", //年级id
        classId: "", //班级id
        studentQuery: "",  //学生姓名或身份证号
        projectId:''//缴费方案,
      },
      select: {
        xuenian:'',
        yearList:[],
        schoolList: [],
        schoolId: "", //校区
        paymentSchemeList: [],
        paymentSchemeId: [],
        categoryList:[], //缴费类型
        gradeList:[],//年级
        classList:[],
        studentSource:''
        // name: "",
        // nameOrIDNumber: "",
        // isReduction:'',
        // dateB:'',
        // dateE:''
      },
      dialogDetailed: {
        show: false,
        student: [],
        data: []
      },
      dialogDetailed1: {
        show: false,
        student: [],
        data: []
      },
      layerFiles:{
        show:false,
        fileList:[],
        jianmianList:[]
      }
    };
  },
  watch:{
    "select.xuenian":function(v){
      if(v){
        this.select.paymentSchemeId = "";
        this.select.schoolId = "";
        this.select.gradeId = "";
        this.data = [];
        this.getSearchP();
      }
    },
    "searchBox.category":function(v){
      if(v){
        this.getData();
      }
    },
    "searchBox.schoolId":function(v){
      if(v){
        this.getData();
      }
    },
    "searchBox.gradeId":function(v){
      if(v){
        this.getData();
      }
    },
    "searchBox.classId":function(v){
      if(v){
        this.getData();
      }
    }
  },
  mounted() {
    // this.getSearchP()
    this.getSchoolYearList();
  },
  methods: {
    // 头部样式
    headClass:function(){
      return 'text-align: center;'
    },
    LoadList:function(){
      this.getData('list')
    },
    // 分页页面切换
    handleCurrentChange:function(val){
      this.pageIndex = val;
      this.getData('list');
    },
    // TODO:获取学年列表
    getSchoolYearList(){
      this.$api.systemSetup.GetSearchList("time").then(res=>{
        console.log("获取学年列表",res)
        this.select.yearList = res.data.result.timeList;
        this.select.xuenian = res.data.result.timeList[0].id;
        this.getSearchP();
      })
    },
    // 搜索项目
    getSearchP(project) {
      this.$api.reportForm.GetSearch("project",'002',this.select.xuenian,this.searchBox.projectId,this.searchBox.schoolId,this.searchBox.gradeId).then(res => {
        //console.log("获取搜索条件1",res);
        this.select.paymentSchemeList = res.data.result.projectList;
        this.searchBox.projectId = res.data.result.projectList[0].projectId;
        this.select.studentSource = res.data.result.projectList[0].studentSource;
        this.getSearchSch();
      });
    },
    // FIXME:获取缴费类型
    getSearchS () {
      this.$api.reportForm.GetSearch("gradeAndCategory",'002',this.select.xuenian, this.searchBox.projectId,this.searchBox.schoolId,this.searchBox.gradeId)
        .then(res1 => {
          //console.log("获取搜索条件2",res1);
          this.select.categoryList = res1.data.result.categoryList;
          this.select.gradeList = res1.data.result.gradeList;
          this.pageIndex = 1
          this.getData('list')
        });
    },

    getSearchSch () {
        this.searchBox.schoolId ="";
        this.$api.reportForm.GetSearch("school",'002',this.select.xuenian,this.searchBox.projectId,this.searchBox.schoolId,this.searchBox.gradeId)
        .then(res1 => {
          //console.log("获取搜索条件3",res1);
          this.select.schoolList = res1.data.result.schoolList;
          this.searchBox.schoolId = res1.data.result.schoolList[0].schoolId;
          this.getSearchS();

        });
    },
    // 校区
    selectGrade (e) {
        console.log(e,1)
         this.pageIndex = 1
        if(e == '') {
           this.select.gradeList = []
           this.searchBox.gradeId = ''
           this.searchBox.classId = ''
           this.select.classList = []
            this.getData('list')
            return
        }
          this.$api.reportForm.GetSearch("gradeAndCategory",'002',this.searchBox.projectId, e)
        .then(res1 => {
          //console.log("获取搜索条件4",res1);
          this.select.gradeList = res1.data.result.gradeList;
          console.log( this.select.categoryList)
           this.getData()

        });

    },
    // 班级
    selectClass(e) {
      this.pageIndex = 1
      if(e == '') {
           this.searchBox.classId = ''
           this.select.classList = []
           this.getData('list')
            return
        }
        this.searchBox.classId = '';
      console.log(this.searchBox)
      this.$api.reportForm.GetSearch("class",'002',this.searchBox.projectId, this.searchBox.schoolId,e)
        .then(res1 => {
          //console.log("获取搜索条件5",res1);
          this.select.classList = res1.data.result.classList;
          console.log( this.select.categoryList)
           this.getData('list')
        });
    },
    getData (type) {
       //console.log("获取列表",this.searchBox);
        this.$api.reportForm.GetReductionList(type,this.searchBox,this.pageIndex)
        .then(res1 => {
           //console.log("获取列表",res1)
              this.tableData = res1.data.result.list;
              this.pageAll = res1.data.result.total;
              this.tableData.forEach(e=>{
                if(e.isResidence=="0"||e.isResidence.replace(/\s*/g,"")=="否"){
                  e.payableMoney = (parseFloat(e.payableMoney).toFixed(2)*1000-parseFloat(e.boarderMoney).toFixed(2)*1000)/1000
                }
              })

        });
    },
    // 导出列表
    exportExcel: function() {
      this.$api.reportForm.GetReductionList('export',this.searchBox,this.pageIndex)
        .then(res1 => {
           //console.log("导出列表",res1)
           window.open(res1.data.result)
        });
    },
    changeTName (event) {
      this.select.schoolId = "";
      this.select.gradeId = "";
      for(var a=0,lenn = this.select.paymentSchemeList.length;a<lenn;a++){
        if(this.select.paymentSchemeList[a].projectId==event){
          this.select.studentSource = this.select.paymentSchemeList[a].studentSource;
        }
      }
        this.getSearchSch();
        this.pageIndex = 1
        // this.getData('list')
    },
    getcategory () {
      this.pageIndex = 1
      this.getData('list')
    },
    getClass () {
      this.pageIndex = 1
      this.getData('list')
    },
    // TODO:查看应收明细
    see(k) {
      this.$api.reportForm.WatchPaymentAmount(k.projectId, k.schoolId, k.sectionId, k.gradeId, k.studentId, k.paymentCategory,k.isResidence, k.isMilitaryTraining, k.isPhysicalExamination).then(res=>{
        //console.log("查看缴费项目请",res);
        this.dialogDetailed.data =  res.data.result;
      })
      this.dialogDetailed.show = true;
    },
    // TODO:查看减免费用明细
    see1(k) {
      this.$api.reportForm.WatchStudentAmount(k.projectId, k.studentId,"", "Tuition",k.isResidence, k.isMilitaryTraining, k.isPhysicalExamination).then(res=>{
        //console.log("查看缴费项目请",res);
        this.dialogDetailed1.data =  res.data.result;
      })
      this.dialogDetailed1.show = true;
    },
    // TODO: 查看减免审批单
    see2:function(k){
      this.layerFiles.jianmianList = [];
      this.layerFiles.fileList = [];
      this.$api.reportForm.GetReductionFiles(k.projectId, k.studentId).then(res=>{
        //console.log("查看减免附件",res);
        if(res.data.result.tuitionFiles.length==0&&!res.data.result.hasOwnProperty('tuitionProof')){
            this.$message({
              message:'暂无减免附件',
              type:'warning'
            })
        }else{
           this.layerFiles.fileList =res.data.result.tuitionFiles;
           if(res.data.result.hasOwnProperty('tuitionProof')&&res.data.result.tuitionProof!=''&&res.data.result.tuitionProof!=null){
             var newList = res.data.result.tuitionProof.split(",");
             newList.forEach(event=>{
               var obg = {}
               obg.fileName = '减免凭据';
               obg.fileUrl = res.data.result.signUrl + event;
               obg.id = "";
               this.layerFiles.jianmianList.push(obg);

             })
           }
        }
        // if(res.data.result.tuitionFiles.length!=0){
        //   this.layerFiles.fileList =res.data.result;
        // }else{
        //   this.$message({
        //     message:'暂无减免附件',
        //     type:'warning'
        //   })
        // }
        this.layerFiles.show=true;
      })
    },
    // 下载上传的附件
    downlade:function(url){
      window.open(url)
    }
  }
};
</script>

<style>
</style>
